<template>
	<view class="content">
		<view class="top">
			<view class="top-left">
			</view>
			<view class="top-right">
			</view>
		</view>
		<view class="box">
			<view class="box-top">
				<view class="">登录&nbsp; / &nbsp;注册</view>
				<view class="">引 领 学 习 新 风 尚</view>
			</view>
			<view class="box-center">
				<u--form
					:model="loginFrom"
					:labelWidth='0'
					:rules="rules"
					ref="loginFrom"
				>
					<u-form-item prop="userAccount">
						<u--input placeholder="请输入账号" prefixIcon="account-fill" v-model="loginFrom.userAccount"
							prefixIconStyle="font-size: 22px;color: #909399;" type="number" fontSize="14"  maxlength="12"></u--input>
					</u-form-item>
					<u-form-item prop="userPassword" class="form-item">
						<u--input :password="true" placeholder="请输入密码" prefixIcon="lock-fill" v-model="loginFrom.userPassword"
							prefixIconStyle="font-size: 22px;color: #909399" fontSize="14" maxlength="30"></u--input>
					</u-form-item>
					<u-form-item prop="captcha" class="form-item">
						<u-input placeholder="请输入验证码" prefixIcon="coupon-fill" v-model="loginFrom.captcha"
							prefixIconStyle="font-size: 22px;color: #909399" fontSize="14">
							<template slot="suffix">
								<image 
								style="width: 160rpx;height: 60rpx;" 
								:src="captcha" 
								@click="getCode()"
								></image>
							</template>
						</u-input>
					</u-form-item>
					<view class="flexC" style="margin-top: 10rpx;">
						<view class="margin-left"> 新同学?立即注册</view>
						<view class="margin-right"> 忘记密码?</view>
					</view>
			</u--form>
			</view>
			<view class="box-bottom">
				<button class="flexA" style="font-size: 16px;" @click="login()">立&nbsp;&nbsp;即&nbsp;&nbsp;登&nbsp;&nbsp;录</button>
				<view class="box-bottom-text flexA">
					<image @click="select" v-if="!isSelect" src="/static/login/单选框 (1).png" mode=""></image>
					<image @click="select" v-else src="/static/login/单选框-选中-02.png" mode=""></image>
					<view class="flexQ">
						已阅读并同意<view style="color:#21D372;">《服务协议》</view>和<view style="color:#21D372;">《隐私政策》</view>
						并了解相关条款内容
					</view>
				</view>
			</view>
			<view class="box-ima flexA">
				<image src="/static/新苗同学-2.png" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>

	export default {
		data() {
			return {
				tips: '获取验证码',
				isSelect: false,
				captcha:'',
				captchaId:'',
				loginFrom: {
					userAccount: '',
					userPassword: '',
					captcha: ''
				},
				rules: {
					'userAccount' : {
						type: 'number',
						required: true,
						len: 12,
						message: '请填写12位的账号',
						trigger: ['blur', 'change']
					},
					'userPassword' : {
						type: 'string',
						required: true,
						max: 30,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					'captcha' : {
						type: 'string',
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onShow() {
			this.getCode();
		},
		methods: {
			async getCode() {
				const res = await getCode()
				this.captcha= "data:image/gif;base64," + res.captcha
				this.captchaId= res.captchaId
			},
			async login(){
				if(!this.isSelect){
					uni.showToast({
						title: '请先阅读并同意服务协议与隐私政策',
						icon: 'none'
					})
					return
				};
				this.$refs.loginFrom.validate().then(res => {
					this.submitForm()
				}).catch(errors => {
					uni.showToast({
						title: '请先按照要求填写表单',
						icon: 'none'
					})
				})
			},
			async submitForm(){
				const res = await login({
					...this.loginFrom,
					captchaId: this.captchaId
				})
				if(res){
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
				}
				this.getCode()
			},
			select() {
				this.isSelect = !this.isSelect
			}
		}
	}
</script>
<style lang="scss">
	.u-input--radius {
		background: #F4F4F4 !important;
		height: 50rpx !important;
		border-radius: 16rpx !important;
	}
	.form-item {
		margin-top: 10rpx;
	}
	.top {
		&-left {
			position: fixed;
			top: -100px;
			left: -90px;
			width: 500rpx;
			height: 500rpx;
			// background-color: skyblue;
			background: linear-gradient(to right bottom, #BBEEF4, #FFFFFF);
			filter: blur(10px);
			border-radius: 50%;
		}

		&-right {
			position: fixed;
			top: -110px;
			right: -110px;
			width: 600rpx;
			height: 600rpx;
			// background-color: skyblue;
			background: linear-gradient(to left bottom, #A9EDC8, #FFFFFF);
			filter: blur(10px);
			border-radius: 50%;
		}
	}

	.box {
		margin: 10rpx 60rpx;
		margin-top: 325rpx;

		&-top {
			&>view:nth-child(1) {
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 40rpx;
			}

			&>view:nth-child(2) {
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 24rpx;
				margin-top: 20rpx;
				color: #989898;
			}
		}

		&-center {
			margin-top: 90rpx;
		}

		.margin {
			&-left {
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 24rpx;
				color: #989898;
				margin-left: 10rpx;
			}

			&-right {
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 24rpx;
				color: #13D069;
				margin-right: 10rpx;
			}
		}

		&-bottom {
			margin-top: 80rpx;

			&>button {
				color: #fff;
				background: #13D069;
				border-radius: 70rpx;
				height: 70rpx;
				font-size: 24rpx;
			}

			&-text {

				margin-top: 35rpx;

				&>image {
					width: 30rpx;
					height: 30rpx;
				}

				&>view {
					font-family: Alibaba PuHuiTi 2.0;
					font-size: 20rpx;
					margin-left: 10rpx;
					color: #989898;
				}
			}
		}

		&-ima {
			margin: 190rpx 0;

			&>image {
				width: 330rpx;
				height: 96rpx;
			}
		}
	}
</style>